<template>
  <div id="waterfall">
    <Waterfall :list="storeList" :breakpoints="breakpoints" :lazyload="true">
      <template #item="{ item }">
        <div class="store-list store-list_waterfall" @click.stop="toRouter(item)" :class="plugin_active ? 'member-article-list' : ''">
          <!-- <img class="thumbImg" v-lazy="item.adv_img ? item.adv_img : item.thumb" v-if="item.adv_img || item.thumb" alt="" style="width: 100%;height: 100%;" /> -->
          <div class="thumbImg">
            <LazyImg v-if="item.adv_img" :url="item.adv_img"></LazyImg>
            <LazyImg v-else :url="item.thumb"></LazyImg>
          </div>
          <div class="min_b">
            <div class="storeDes" v-if="item.store_introduce">{{ item.store_introduce }}</div>
            <div class="sale">
              <div class="grade" v-if="datas.show_store_view.indexOf('2') > -1">
                <i class="iconfont icon-card_collect_b"></i>
                <span class="score-color">{{ item.average_score }}分</span>
              </div>
              <div class="num" v-if="datas.discount_list.indexOf('1') > -1 && is_sales_display">已售{{ item.order_total }}单</div>
              <div class="num" v-if="datas.discount_list.indexOf('1') < 0 && !is_sales_display"></div>
            </div>
            <div class="category-list" v-if="datas.show_store_view.indexOf('1') > -1">
              <template v-if="item.has_many_category && item.has_many_category.length">
                <template v-for="(citem, cindex) in item.has_many_category">
                  <span class="category" @click.stop="toClassify(citem.id, citem.name)" :key="cindex" v-if="cindex < 3">{{ citem.name }}</span>
                </template>
              </template>
              <div class="category" v-else>
                <span>暂无分类</span>
              </div>
            </div>
            <div class="address" v-if="item.address && datas.show_store_view.indexOf('3') > -1">
              <template v-if="item.address.city">{{ item.address.city }}</template>
              <template v-if="item.address.detailed_address">{{ item.address.detailed_address }}</template>
            </div>
            <div class="distance" @click.stop="goToAdress(item)" v-if="item.distance && datas.show_store_view.indexOf('4') > -1">
              {{ item.distance }}{{ item.unit }} <i class="iconfont icon-all_daohang"></i>
            </div>
            <div class="label" :class="{ 'shadow-box': item.dispatchs && item.dispatchs.length >= 4 }" v-if="datas.show_tag_view && item.dispatchs">
              <div class="label-list" v-if="item.dispatchs">
                <!-- <div class="label-title" v-if="item.is_open_store_attendance">
                  门店打卡
                </div> -->
                <div class="label-title" style="margin-bottom: 0.25rem;" v-for="dispatch in item.dispatchs" :key="dispatch">
                  {{ dispatch }}
                </div>
              </div>
            </div>
            <div class="discounts" v-if="datas.discount_view">
              <div class="discounts-list" v-if="datas.discount_list.indexOf('4') > -1 && item.has_many_coupon && item.has_many_coupon.length > 0">
                <div class="type">优惠</div>
                <div class="con-list">
                  <template v-for="(coupon, index) in item.has_many_coupon">
                    <div class="con" v-if="index <= 2" :key="index">
                      {{ coupon.name }}
                    </div>
                  </template>
                </div>
              </div>
              <!-- point_deduct_switch 积分抵扣 store_love.deduction 爱心值抵扣  -->
              <div class="discounts-list" v-if="datas.discount_list.indexOf('3') > -1 && item.store_point && (item.store_point.point_deduct_switch != 0 || item.store_love.deduction == 1)">
                <div class="type">{{ item.goods_show && item.goods_show.search_class_name ? item.goods_show.search_class_name : "抵扣" }}</div>
                <div class="con-list">
                  <div class="con" v-if="item.store_love.deduction == 1 ? true : false">
                    {{ item.store_love.deduction_proportion }}
                  </div>
                  <div class="con" :class="{ store_deduction_style: item.goods_show && item.goods_show.store_deduction_style }" v-if="item.store_point.point_deduct_switch == 0 ? false : true">
                    {{ item.store_point.max_point_deduct }}
                  </div>
                  <div class="con store_cash_back_style" v-if="item.store_point.commission_deduct && item.goods_show.store_cash_back">
                    {{ item.store_point.commission_deduct }}
                  </div>
                </div>
              </div>
              <div class="discounts-list" v-if="datas.discount_list.indexOf('2') > -1 && item.store_point && (item.store_point.point_switch != 0 || item.store_love.award == 1)">
                <div class="type">赠送</div>
                <div class="con-list">
                  <div class="con" v-if="item.store_point.point_switch == 0 ? false : true">
                    {{ item.store_point.point }}
                  </div>
                  <div class="con" v-if="item.store_love.award == 1 ? true : false">
                    {{ item.store_love.award_proportion }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </Waterfall>
  </div>
</template>
<script>
import { LazyImg,Waterfall } from "vue-waterfall-plugin";
import "vue-waterfall-plugin/dist/style.css";
export default {
  props: ["storeList", "datas", "plugin_active", "is_sales_display"],
  data() {
    return {
      breakpoints: {
        1200: {
          //当屏幕宽度小于等于1200
          rowPerView: 2
        },
        800: {
          //当屏幕宽度小于等于800
          rowPerView: 2
        },
        500: {
          //当屏幕宽度小于等于500
          rowPerView: 2
        }
      }
    };
  },
  methods: {
    // 跳转到店铺
    toRouter(item) {
      console.log(item);
      if (item.specify_show == 1) {
        this.$router.push(this.fun.getUrl("o2oStore_v2", { store_id: item.id, fromHome: 1 }));
      } else {
        this.$router.push(this.fun.getUrl("HomeSeller", { store_id: item.id, fromHome: 1 }));
      }
    },
    goToAdress(items) {
      let point = this.fun.bd_decrypt(items.longitude, items.latitude);
      this.fun.goToWXAdress(point, items.store_name, items.address.detailed_address); //, items.address.city
    }
  },
  components: { Waterfall,LazyImg }
};
</script>
<style lang="scss" scoped>
#waterfall {
  .store-list {
    box-sizing: border-box;
    .min_b{
      padding:0 0.3rem 0 0.3rem;
    }
    .storeDes {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: bold;
      // font-size: 0.94rem;
      line-height: 1rem;
      // margin-top: 0.78rem;
    }
    .sale {
      font-size: 0.75rem;
      color: #00001c;
      display: flex;
      width: 100%;
      margin-top: 0.3rem;
      border-bottom: 1px solid #f0f0f1;
      padding-bottom: 0.63rem;
      .grade {
        padding-right: 8px;
        i {
          color: #ff9c43;
          font-size: 0.75rem;
        }
        .score-color {
          font-size: 0.75rem;
          color: #f96d20;
        }
      }
      .num {
        flex: 1;
      }
    }
    .category-list {
      display: flex;
      margin-top: 0.63rem;
      .category {
        display: inline-block;
        padding: 0.16rem 0.19rem;
        // border-radius: 0.25rem;
        margin-right: 0.31rem;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        // font-size: 0.69rem;
        color: #f96d20;
      }
    }
    .address {
      font-size: 0.75rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
    }
    .distance {
      display: flex;
      align-items: center;
      font-size: 0.75rem;
      color: #00001c;
      margin-bottom: 0.5rem;
      .icon-all_daohang {
        font-size: 1.3rem;
        color: #f15353;
      }
    }
    .shadow-box {
      position: relative;
    }
    .label {
      margin-bottom: 0.5rem;
      .label-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        // width: 100%;
        // overflow-x: scroll;
        // scrollbar-width: none; /* Firefox */
        // -ms-overflow-style: none; /* IE 10+ */
        // &::-webkit-scrollbar {
        //   display: none; /* Chrome Safari */
        // }
        .label-title {
          // font-size: 0.69rem;
          margin-right: 0.28rem;
          padding: 0.16rem 0.25rem;
          flex-shrink: 0;
          // border-radius: 0.25rem;
          // border: 0.03rem solid #d6d6dc;
        }
      }
    }
    .discounts {
      margin-bottom: 0.25rem;
      .discounts-list {
        display: flex;
        .type {
          white-space: nowrap;
        }
        .con-list {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          font-weight: 500;
          margin-left: 0.41rem;
          .con {
            margin-right: 0.41rem;
          }
        }
      }
    }
  }
}
</style>
